var data_zh = ['你知道吗', '六月', '一日', '星期一', '是', '儿童节'];
var data_en = ['do you know', 'June', 'One day', 'Monday', 'Yes', 'Children\'s day'];

var text = document.querySelector("#new");
var tex  = document.querySelector("#old");

var btn_if  = document.querySelectorAll("#btn_if button");
var btn_that = document.querySelectorAll("#btn_that button");

function fy() {
    for(var i = 0;i<data_zh.length;i++){
        if (text.value === data_zh[i]){
            tex.value = data_en[i];
            if (lang === 'en'){
                swap();
            }
        }
    }
    for(var i = 0;i<data_en.length;i++){
        if (text.value === data_en[i]){
            tex.value = data_zh[i];
        }
        if (lang === 'zh'){
            swap();
        }
    }
}

var lang = 'zh';

function swap() {
    if (lang === 'zh'){
        lang = 'en';
    }else {
        lang = 'zh';
    }
    for (var i = 0;i<btn_if.length;i++){
        btn_if[i].classList.remove("btn-primary");
        btn_if[i].classList.remove("btn-secondary");
        btn_that[i].classList.remove("btn-primary");
        btn_that[i].classList.remove("btn-secondary");
    }
    switch (lang){
        case 'en':
            btn_if[0].classList.add("btn-secondary");
            btn_if[1].classList.add("btn-primary");
            btn_that[0].classList.add("btn-secondary");
            btn_that[1].classList.add("btn-primary");
            break;
        case 'zh':
            btn_if[0].classList.add("btn-primary");
            btn_if[1].classList.add("btn-secondary");
            btn_that[0].classList.add("btn-primary");
            btn_that[1].classList.add("btn-secondary");
            break;
    }
}
